<template>

  <h3>级联选择器示例</h3>
  <div class="result-info mt-4">

  </div>

  <el-form :model="state.form" :rules="rules" style="padding-left: 10px;">
    <el-form-item label="返利类型及明细划分" prop="selectedValues">
      <el-cascader v-model="state.form.selectedValues" :options="categoryData" :props="props">
        <template #default="{ node, data }">
          <span v-if="node.parent?.data.value === 'other'">
            <el-input v-model="selectedLabels" placeholder="请输入其他内容" @blur="handleInputBlur" @click.stop />
          </span>
          <span v-else>{{ data.label }}</span>
        </template>
      </el-cascader>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue';
const state = reactive({
  form: {
    selectedValues: ['', ''],
  },
})
const selectedLabels = ref('');//自选输入框
const handleInputBlur = () => {
  state.form.selectedValues = ["other", selectedLabels.value]
  console.log(state.form.selectedValues)
  categoryData.value = [
    { value: 'pressure', label: '压力毯押金', children: [{ value: 'pressure_detail', label: '压力毯押金' }] },
    { value: 'training', label: '培训押金', children: [{ value: 'training_detail', label: '培训押金' }] },
    { value: 'other', label: '其他', children: [{ value: selectedLabels.value, label: selectedLabels.value, disabled: true }] }
  ];
  state.explainFirst = state.form.selectedValues[0]
  state.explainSecond = state.form.selectedValues[1]
};
const categoryData = ref([
  { value: 'pressure', label: '压力毯押金', children: [{ value: 'pressure_detail', label: '压力毯押金' }] },
  { value: 'training', label: '培训押金', children: [{ value: 'training_detail', label: '培训押金' }] },
  { value: 'other', label: '其他', children: [{ value: 'other_service', label: '输入框', disabled: true }] }
]);

const props = {
  expandTrigger: 'hover'
}

const rules = reactive({

  selectedValues: [
    { required: true, message: '请选择返利类型及明细', trigger: ['change', 'blur'] },
    { validator: (rule, value, callback) => { if (!value[1]) { callback(new Error('请选择完整的明细（必须包含第二项）')); } else { callback(); } }, trigger: 'blur' }
  ]
})

</script>

<style scoped lang="scss"></style>
